<template>
  <div class="tree">
    <b-menu>
      <b-menu-list label="Menu">
        <b-menu-item icon="information-outline" label="Info"></b-menu-item>
        <b-menu-item icon="settings" expanded>
          <template #label="props">
            Administrator
            <b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'"></b-icon>
          </template>
          <b-menu-item icon="account" label="Users"></b-menu-item>
          <b-menu-item icon="cellphone-link">
            <template #label>
              Devices
              <b-dropdown aria-role="list" class="is-pulled-right" position="is-bottom-left">
                <template #trigger>
                  <b-icon icon="dots-vertical"></b-icon>
                </template>
                <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
                <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
                <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
              </b-dropdown>
            </template>
          </b-menu-item>
          <b-menu-item icon="cash-multiple" label="Payments" disabled></b-menu-item>
        </b-menu-item>
        <b-menu-item icon="account" label="My Account">
          <b-menu-item label="Account data"></b-menu-item>
          <b-menu-item label="Addresses"></b-menu-item>
        </b-menu-item>
      </b-menu-list>
      <b-menu-list>
        <b-menu-item label="Expo" icon="link" tag="router-link" target="_blank" to="/expo"></b-menu-item>
      </b-menu-list>
      <b-menu-list label="Actions">
        <b-menu-item label="Logout"></b-menu-item>
      </b-menu-list>
    </b-menu>

    <b-menu v-if="data&&data.length>0">
      <list :data="data" :base-path="basePath" @tree-change="changeItem" :class="border?'':'border-none'"/>
    </b-menu>
    <div v-else>
      {{emptyText}}
    </div>
  </div>
</template>

<script>
import list from "./list";
export default {
  components:{
    list
  },
  props: {
    isSubmenuList: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    emptyText: {
      type: String,
      default: ''
    },
    basePath: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },
  methods: {
    changeItem(item){
      this.data.forEach(value => {
        if(value.id===item.id){
          value.active=item.active
        }else {
          value.active=false
        }
      })
    },
    menuClick (item) {
      this.$emit('menu-click', item)
    }
  }
}
</script>
<style lang="scss" >
.tree{
  li ul{
    margin: 0.2rem 0.75em;
  }
  //a{
  //  color: #606266 !important;
  //  padding:0.3rem 0;
  //}
  .border-none li ul{
    border-left: 0;
  }
  .is-active{
    /*line-height: 3em;*/
    color: $primary;
  }
}
</style>
